<template>
  <div class="article-detail">
    <div class="back" @click="back">返回</div>
    <h1>{{ article.title }}</h1>
    <div class="head">
      <div>分类: {{ article.tag_name }}</div>
      <div>来自: {{ article.real_name }}</div>
      <div>
        发布时间:
        {{ dayjs(Number(article.create_time)).format("YYYY-MM-DD HH:mm") }}
      </div>
      <div v-if="article.update_time">
        更新时间:
        {{ dayjs(Number(article.update_time)).format("YYYY-MM-DD HH:mm") }}
      </div>
    </div>
    <mavon-render :boxShadow="false" :codeStyle="'monokai'" :content="mdContent" />
  </div>
</template>

<script>
import dayjs from "dayjs";
import { createNamespacedHelpers } from "vuex";
const { mapActions } = createNamespacedHelpers("admin");

export default {
  data() {
    return {
      articleId: "",
      article: {},
      mdContent: null,
      htmlContent: null
    };
  },
  watch: {
    $route: {
      deep: true,
      immediate: true,
      handler(val) {
        if (val.query.id) {
          this.articleId = val.query.id;
        }
      }
    }
  },
  mounted() {
    this.fetchArticleDetail();
  },
  methods: {
    dayjs,
    ...mapActions(["getArticleDetail"]),
    fetchArticleDetail() {
      this.getArticleDetail(this.articleId).then(res => {
        this.article = res;
        this.mdContent = res.content || "";
      });
    },
    back() {
      this.$router.go(-1);
    }
  }
};
</script>

<style lang="scss" scoped>
.article-detail {
  height: 100%;
  overflow: auto;
  padding: 50px 190px;
  .back {
    position: fixed;
    top: 100px;
    left: 300px;
    cursor: pointer;
  }
  .head {
    display: flex;
    flex-flow: column;
    align-items: flex-start;
    margin-bottom: 40px;
    font-size: 14px;
  }
}
</style>
